可以把它想成是瀏覽器的資料庫，比方說我們在上博客來網站時可以瀏覽你感興趣的書，之後神奇的地方是，在網頁中有個區塊竟然記錄了我最近瀏覽的書籍，這是怎麼做到的呢？

其實這不是秘密，而是在進入博客來網站時所有的操作記錄會被放在瀏覽器的資料庫localStorage 內，我們可以透過以下路徑找到它！

滑鼠右鍵點擊檢查工具 > Application > LocalStorage

這邊有看到 key 與 Value 這邊就存放了我們點擊那些感興趣的書，再透過 JS 程式去抓取這邊的資料把他放在最近瀏覽的書區塊內。

setItem、getItem 基本操作

setItem 是存放資料到localStorage
getItem 是從 localStorage 拿取存放的資料

我們可以透過下面的程式碼範例來理解如何存放資料到資料庫並拿取資料出來，這邊要做出的效果是在輸入名字後，點擊儲存可以將名字存下，再按呼叫就能彈跳出我們輸入的名字，程式碼範例如下：

HTML

<h2>輸入您的名字</h2>
<input type="text" placeholder="輸入姓名" class="textClass">
<input type="button" value="儲存" class="btnClass">
<input type="button" value="呼叫" class="btnCall">

JS

var btn = document.querySelector('.btnClass');
var call = document.querySelector('.btnCall');

//存放資料到 localStorage
function saveName(e){
          var str = document.querySelector('.textClass').value;
          localStorage.setItem('myName',str)
      }
btn.addEventListener('click',saveName);

//從 localStorage 拿取存放的資料
call.addEventListener('click',function(){
    var str = localStorage.getItem('myName');
    alert('你的名是叫'+ str)
})

說明

1. 首先我們先把會操作到的元素用變數存起來
2. 在儲存按鈕上綁定監聽事件
3. 也在呼叫按鈕上綁定監聽事件
4. 在儲存按鈕的監聽事件函式 saveName 寫一套把輸入框內的文字儲存到瀏覽器的方法，方法是用以下語法：

localStorage.setItem('myName',str) 
//setItem(Key名稱,value內容) 

5. 在呼叫按鈕的監聽事件函式寫從資料庫取出值得語法，只要改成 getItem 並抓出 key 名稱就好，最後再用 alert 把字串與抓到的值組合起來即可！

localStorage.getItem('myName')
//setItem(Key名稱,value內容) 

以上就是介紹 localStorage 的功能，以及實務上怎麼把資料儲存進去，再把資料提取出來的方法！